<template>
  <div id="details">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="v in gallery" :key="v.id"
        ><img :src="v.img_url" alt="" width="100%"
      /></van-swipe-item>
    </van-swipe>
    <!-- 无忧退货 -->
    <van-row>
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />30天无忧退货</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />满88元免邮费</van-col
      >
    </van-row>
    <div class="info">
      <h1>{{ info.name }}</h1>
      <h2>{{ info.goods_brief }}</h2>
      <h3>¥ {{ info.retail_price }}.00 元</h3>
      <!-- <h3>{{ info.retail_price | fun }}</h3> -->
    </div>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      closeable
    >
      <div class="pop">
        <img :src="info.list_pic_url" alt="" width="30%" />
        <!-- <span class="pic">价格： {{ info.retail_price | fun }}</span> -->
        <span class="pic">价格：¥ {{ info.retail_price }}.00 元</span>
        <span class="ku">库存：{{ info.goods_number }}</span>
      </div>
      <div class="shu">
        <h1>数量：</h1>
        <van-stepper v-model="value" min="1" :max="info.goods_number"/>
      </div>
    </van-popup>
    <div class="goods">
      <h2>商品参数</h2>
      <p v-for="(v, k) in attribute" :key="k">
        <span>{{ v.name }}</span> <big class="van-ellipsis">{{ v.value }}</big>
      </p>
    </div>
    <div v-html="info.goods_desc" class="goods_desc"></div>
    <div class="question">
      <div>
        <van-divider
          class="chang"
          :style="{ color: '#1989fa', borderColor: '#ccc', padding: '0 16px' }"
        >
          常见问题
        </van-divider>
        <ul>
          <li v-for="v in issue" :key="v.id">
            <h1>{{ v.question }}</h1>
            <p>{{ v.answer }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="product">
      <van-divider
        class="chang"
        :style="{ color: '#1989fa', borderColor: '#ccc', padding: '0 16px' }"
      >
        相关产品
      </van-divider>
      <ul>
        <li v-for="v in goodsList" :key="v.id" @click="tiao(v.id)">
          <img :src="v.list_pic_url" alt="" width="100%" />
          <h4 class="new1 van-ellipsis">{{ v.name }}</h4>
          <!-- <p class="new2">{{ v.retail_price | fun }}</p> -->
          <p class="new2">¥ {{ v.retail_price }}.00 元</p>
        </li>
      </ul>
    </div>
    <van-goods-action>
      <van-goods-action-icon
          :icon="fun?'star-o':'star'"
          :text="fun?'未收藏':'已收藏'"
          :color="fun?'#333':'darkred'"
          @click="fun1()"
        />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="CartGoodscount"
        to="/cart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="showPopup"
      />
    </van-goods-action>
  </div>
</template>

<script>
import {
  GetDetail,
  GetRelated,
  PostCartAdd,
  GetCartGoodscount,
} from "@/request/api";
export default {
  data() {
    return {
      value: "1",
      show: false,
      gallery: "",
      info: "",
      attribute: "",
      issue: "",
      goodsList: "",
      id: "",
      productList: "",
      productId: "",
      CartGoodscount: "",
      fun:true
    };
  },
  components: {},
  methods: {
    showPopup() {
      if (!this.show) {
        this.show = true;
      } else {
        // console.log(this.id);
        PostCartAdd({
          goodsId: this.id,
          productId: this.productId,
          number: this.value,
        }).then((res) => {
          // console.log(res);
        });
      }
    },
    fun1() {
      this.fun=!this.fun
    },
    tiao(id) {
      this.$router.push("/details/" + id);
      this.$router.go(0);
    },
  },
  created() {
    this.id = this.$route.params.id;
    GetDetail({ id: this.id }).then((res) => {
      //console.log(res.data);
      this.gallery = res.data.gallery;
      this.info = res.data.info;
      this.attribute = res.data.attribute;
      this.issue = res.data.issue;
      this.productId = res.data.productList[0].id;
      //console.log(this.productId);
    });
    GetRelated({ id: this.id }).then((res) => {
      // console.log(res);
      this.goodsList = res.data.goodsList;
    });
    GetCartGoodscount().then((res) => {
      this.CartGoodscount = res.data.cartTotal.goodsCount;
      //  console.log(this.CartGoodscount);
    });
  },
  filters: {
    /* fun(v) {
      let num = v.toFixed(2);
      return "￥" + num + "元";
    }, */
  },
};
</script>

<style lang='less' scoped>
#details {
  background-color: #efefef;
}
.van-col {
  font-size: 0.13rem;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info {
  background-color: white;
  width: 100%;
  border-bottom: 1px solid #efefef;
  h1 {
    font-size: 0.2rem;
    text-align: center;
    padding-top: 0.3rem;
  }
  h2 {
    font-size: 0.14rem;
    text-align: center;
    padding-top: 0.3rem;
  }
  h3 {
    font-size: 0.14rem;
    text-align: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #8b0050;
  }
}
.pop {
  width: 100%;
  // display: flex;
  // justify-content: space-between;
  position: relative;
  span {
    font-size: 0.14rem;
  }
  .pic {
    position: absolute;
    top: 0.3rem;
  }
  .ku {
    position: absolute;
    top: 0.6rem;
  }
}
.shu {
  padding-left: 0.1rem;
  padding-bottom: 0.3rem;
  h1 {
    font-size: 0.2rem;
  }
  .van-stepper {
    margin-top: 0.2rem;
  }
}
.goods {
  background-color: white;
  padding-bottom: 0.2rem;
  h2 {
    font-size: 0.18rem;
    margin-top: 0.2rem;
    padding-left: 0.1rem;
    padding-top: 0.2rem;
    margin-bottom: 0.1rem;
  }
  p {
    width: 90%;
    margin-left: 2.5%;
    background: #efefef;
    border-radius: 6px;
    height: 30px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.14rem;
    padding: 0 0.1rem;
  }
  span {
    color: #999;
    width: 30%;
    margin-right: 5px;
    text-align: right;
  }
  big {
    width: 70%;
    margin-right: 5px;
    text-align: left;
  }
}
/deep/.goods_desc {
  // margin-bottom: 0.1rem;
  img {
    display: block;
    width: 100%;
  }
}
.question {
  background-color: white;
  .chang {
    width: 60%;
    margin: 0 auto;
    padding-top: 0.1rem;
  }
  h1 {
    font-size: 0.18rem;
    margin-left: 0.2rem;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
    color: #666;
  }
  p {
    font-size: 0.14rem;
    padding-left: 20px;
    padding-right: 10px;
    color: #666;
  }
}
.product {
  background-color: white;
  .chang {
    width: 60%;
    margin: 0 auto;
    padding-top: 0.1rem;
  }
  .new1 {
    font-size: 0.14rem;
    text-align: center;
  }
  .new2 {
    font-size: 0.14rem;
    text-align: center;
    color: #8b0050;
    margin-top: 0.1rem;
    margin-bottom: 0.3rem;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
  }
  li {
    width: 49%;
  }
}
.van-goods-action {
  z-index: 10000;
}
</style>